import { defineComponent, toRefs, ref } from "vue";
import { treeProps, TreeProps, ITreeNode } from "./tree-types";
import { generateInnerTree } from "./utils";

export default defineComponent({
	name: "STree",
	props: treeProps,
	setup(props: TreeProps) {
		const { data } = toRefs(props);
		const innerData = ref(generateInnerTree(data?.value ?? []));
		console.log(innerData);

		return () => {
			return (
				<div class="s-tree">
					{innerData.value.map((treeNode) => (
						<div class="s-tree-node" style={{ paddingLeft: 24 * (treeNode.level - 1) + "px" }}>
							{treeNode.label}
						</div>
					))}
				</div>
			);
		};
	}
});
